<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pointDataResult</title>
  </head>
  <body>
    <script>
      // 分几种使用场景情况
      /**
        (1)只传起点、终点；保证起始点以及线的颜色一致。
        (2)传递数据起点、终点、点颜色、线颜色；根据传参展示对应颜色。
      */
      //  {
      //       "startPointX":118.8062,
      //       "startPointY":31.9208,
      //       "endPointX":119.1543,
      //       "endPointY": 25.0222,
      //       "startPointColor": "red",
      //       "endPointColor": "red",
      //       "lineColor": "red"
      //   }

      //   两个(无其他传参)
      //   const params = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //   ];
      // TODO:
      // 起点去重
      // 线的数据不用去重
      // 线的数组，在点数据渲染就配置
      const params = [
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 116.415687,
          endPointY: 39.883246,
          // startPointColor: "red",
          // endPointColor: "endColor-red",
          //   lineColor: "lineColor-red",
        },
        {
          startPointX: 113.269704,
          startPointY: 23.12284,
          endPointX: 120.415687,
          endPointY: 39.883246,
          //   startPointColor: "startColor-green",
          //   endPointColor: "endColor-green",
          //   lineColor: "lineColor-green",
        },
        {
          startPointX: 126.556047,
          startPointY: 45.296449,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 93.330529,
          startPointY: 41.598612,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 106.466199,
          startPointY: 37.820391,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 89.299301,
          startPointY: 30.029682,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },

        {
          startPointX: 101.367928,
          startPointY: 24.542566,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 108.837231,
          startPointY: 22.916587,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 103.759577,
          startPointY: 31.365153,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
        {
          startPointX: 117.851906,
          startPointY: 26.479143,
          endPointX: 116.415687,
          endPointY: 39.883246,
        },
      ];

      // 16个
      //   const params = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 120.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 122.8562,
      //       endPointY: 34.9708,
      //     },
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 121.8562,
      //       endPointY: 34.9708,
      //     },
      //   ];

      //   const result = [
      //     {
      //       startPointX: 118.8062,
      //       startPointY: 31.9208,
      //       endPointX: 119.1543,
      //       endPointY: 25.0222,
      //       startPointColor: "red",
      //       endPointColor: "red",
      //       lineColor: "red",
      //     },
      //     {
      //       startPointX: 115.8062,
      //       startPointY: 30.9208,
      //       endPointX: 119.1543,
      //       endPointY: 25.0222,
      //       startPointColor: "red",
      //       endPointColor: "red",
      //       lineColor: "red",
      //     },
      //   ];

      /* 需要处理的数据 */
      //   let pointDataResult;
      //   let mapDataResult;
      let result;

      function handleMapPonitData(handleData) {
        let handleResult = {};
        // 1.颜色组处理
        const colors = handleColors(handleData);
        // 2.数据处理
        console.log("源数据 handleData", handleData);
        handleResult.pointSource = renderPointData(handleData, colors);
        // handleResult.lineAndPointSource = handleMapData(handleData, colors);

        return handleResult;

        // ---- 辅助函数
        // 处理颜色组
        function handleColors(sourceData) {
          const normalColor = [
            "#4ab2e5",
            "#4fb6d2",
            "rgb(129, 9, 223)",
            "rgb(120, 166, 243)",
            "rgb(218, 56, 26)",
            "rgb(149, 7, 178)",
            "rgb(166, 154, 191)",
            "rgb(234, 186, 148)",
            "rgb(181, 56, 177)",
            "rgb(67, 243, 188)",
          ];

          if (sourceData.length <= normalColor.length) {
            return normalColor;
          } else {
            return handleNewColorData();
          }

          // 处理数据与色值不匹配的，再随机生成颜色
          function handleNewColorData() {
            let num = Number(sourceData.length) - Number(normalColor.length);
            const newColors = generateRandomColors(num);
            const renderColors = [...normalColor, ...newColors];
            return renderColors;
          }

          /* 随机颜色 */
          function generateRandomColors(numColors) {
            var colors = [];
            for (var i = 0; i < numColors; i++) {
              var r = Math.floor(Math.random() * 256);
              var g = Math.floor(Math.random() * 256);
              var b = Math.floor(Math.random() * 256);
              colors.push("rgb(" + r + ", " + g + ", " + b + ")");
            }
            return colors;
          }
        }
        // 处理点数据
        function renderPointData(data, colors) {
          let startPoints = [];
          let endPoints = []; // 存储所有的 endPoint
          let startPointColors = [];
          let endPointColors = [];

          let tmpStartPoints = [];

          let pointData = [];
          let endItems = [];
          let needAddEndPoints = [];

          const startPointColorField = "startPointColor";
          const endPointColorField = "endPointColor";
          data.forEach((item, itemIdx) => {
            let startPointObj = {
              value: [],
              itemSstartPointstyle: {
                color: "",
              },
            };
            // obj.value = [item.startPointX, item.startPointY];
            // // 如果本身有传入颜色的值，就使用传参的值，否则使用默认颜色值
            // if (item.hasOwnProperty(startPointColorField)) {
            //   obj.itemStyle = {
            //     color: item[startPointColorField],
            //   };
            // } else {
            //   obj.itemStyle = {
            //     color: colors[itemIdx],
            //   };
            // }
            // pointData.push(obj);

            startPoints.push();
            // endItems.push(item);
            // endPoints.push([item.endPointX, item.endPointY]);
          });

          console.log("pointData", pointData);

          return;
          //   终点配置
          //   判断所有的终点是否为同一个
          let sameEndPoints = true; // 假设所有终点都一致
          let differentPoints = [];

          // 终点数据去重
          endPoints.forEach((endPoint, index, array) => {
            if (index !== 0) {
              // 从第二个元素开始比较
              if (endPoint[0] !== array[0][0] || endPoint[1] !== array[0][1]) {
                differentPoints.push(endPoint);
                sameEndPoints = false; // 只要有一个终点不一致，就将标志设置为 false
              }
            }
          });
          if (sameEndPoints) {
            // 如果都为同一个终点，则添加一个
            let fisrtEndItem = endItems[0];
            let obj = {};
            obj.value = endPoints[0];
            // 如果本身有传入颜色的值，就使用传参的值，否则使用默认颜色值
            if (fisrtEndItem.hasOwnProperty(endPointColorField)) {
              obj.itemStyle = {
                color: fisrtEndItem[endPointColorField],
              };
            } else {
              obj.itemStyle = {
                color: colors[0],
              }; // 终点色默认取色组的第一个
            }
            needAddEndPoints.push(obj);
          } else {
            // console.log("differentPoints", differentPoints);
            differentPoints.forEach((diffPoint, diffPointIdx) => {
              let obj = {};
              obj.value = diffPoint;
              // 如果本身有传入颜色的值，就使用传参的值，否则使用默认颜色值
              if (diffPoint.hasOwnProperty(endPointColorField)) {
                obj.itemStyle = {
                  color: diffPoint[endPointColorField],
                };
              } else {
                obj.itemStyle = {
                  color: colors[diffPointIdx],
                }; // 终点色默认取色组的第一个
              }
              needAddEndPoints.push(obj);
            });
          }
          pointData.push(...needAddEndPoints);
          return pointData;
        }
        // 处理点线数据
        function handleMapData(data, colors) {
          console.log("需要处理的数据", handleData);
          let lines = [];
          let res = [];
          const lineColorField = "lineColor";
          data.forEach((item, itemIdx) => {
            let obj = {};
            obj.coords = [
              [item.startPointX, item.startPointY],
              [item.endPointX, item.endPointY],
            ];
            // 如果本身有传入颜色的值，就使用传参的值，否则使用默认颜色值
            if (item.hasOwnProperty(lineColorField)) {
              obj.lineStyle = {
                color: item[lineColorField],
              };
            } else {
              obj.lineStyle = {
                color: colors[itemIdx],
              };
            }

            res.push(obj);
          });
          return res;
        }
      }

      result = handleMapPonitData(params);
      console.log("result", result);
    </script>
  </body>
</html>
